<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>	
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加</title>
<link rel="stylesheet" href="${ctx}/static/js/layui/css/layui.css">
<link rel="stylesheet" href="${ctx}/static/js/formSelects-v4.css" />
<style type="text/css">
	.msg{
		color : red !important;
	}
</style>
</head>
<body>
	<div style="padding: 10px;">
		<form class="layui-form" action="">
			<div class="layui-form-item">
				<label class="layui-form-label">昵称</label>
				<div class="layui-input-inline">
					<input type="text" name="nickname" required
						lay-verify="required" placeholder="请输入昵称" autocomplete="off"
						class="layui-input">
				</div>
				<div class="layui-form-mid layui-word-aux"></div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">用户</label>
				<div class="layui-input-inline">
					<input type="text" name="username" required
						lay-verify="required" placeholder="请输入用户名" autocomplete="off"
						class="layui-input">
				</div>
				<div class="layui-form-mid layui-word-aux msg"></div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-inline">
					<input type="password" name="password" required
						lay-verify="required" placeholder="请输入密码" autocomplete="off"
						class="layui-input">
				</div>
				<div class="layui-form-mid layui-word-aux"></div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block">
					<select name="sex" lay-verify="required">
						<option value=""></option>
						<option value="男">男</option>
						<option value="女">女</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">电话</label>
				<div class="layui-input-inline">
					<input type="text" name="tel" required
						lay-verify="required" placeholder="请输入电话" autocomplete="off"
						class="layui-input">
				</div>
				<div class="layui-form-mid layui-word-aux"></div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">邮箱</label>
				<div class="layui-input-inline">
					<input type="text" name="email" required
						lay-verify="required" placeholder="请输入邮箱" autocomplete="off"
						class="layui-input">
				</div>
				<div class="layui-form-mid layui-word-aux"></div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">状态</label>
				<div class="layui-input-block">
					<input type="checkbox" name="state" lay-skin="switch"
						lay-text="正常|冻结" checked value="1">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">角色</label>
				<div class="layui-input-block">
					<select  name="roles" xm-select="role" id="rolename">
						<option value=""  ></option>
						<c:forEach items="${roles}" var="role">
							<option value="${role.id }">${role.rolename}</option>
						</c:forEach>
					</select>
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">头像</label>
				<div class="layui-input-inline">
					<button type="button" class="layui-btn" id="test1">
						<i class="layui-icon">&#xe67c;</i>上传头像
					</button>
				</div>
				<input type="hidden" name="headImg" id="headImg">
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"></label>
				<img class="layui-upload-img" width="50px" id="demo1">
			</div>
			
			
			
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
		<script src="${ctx}/static/js/layui/layui.js"></script>
		<script>
		//Demo

			layui.config({
				base : '${ctx}/static/js/' //此处路径请自行处理, 可以使用绝对路径
			}).extend({
				formSelects : 'formSelects-v4.min'
			});
		
			layui.use([ 'form', 'upload','formSelects' ], function() {
				var form = layui.form;
				var upload = layui.upload;
				var $ = layui.$;
				var formSelects = layui.formSelects;

				//监听提交
				form.on('submit(formDemo)', function(data) {
					console.log(data);
					//$.post一般来说需要3个参数：url，参数，回调函数
					$.post('${ctx}/user/add', data.field,
							function(e) {
								if (e == "") {
									parent.layui.table.reload("demo");
									parent.layer.msg('添加成功', {
										icon : 1
									}); //高用父窗口中的layer来提示，这样关闭弹出窗后提示不会立马关闭
									var index = parent.layer
											.getFrameIndex(window.name); //先得到当前iframe层的索引
									parent.layer.close(index); //再执行关闭 
								} else {
									alert("失败");
								}
							})
					return false;
				});

				//光标离开后，去查询用户名是否存在
				$('input[name="username"]').blur(function() {
					var v = $(this).val();
					//Ajax请求
					$.ajax({
						url : '${ctx}/user/isExist', //地址
						data : { //data是参数
							username : v
						},
						success : function(e) { //成功后的回调函数
							if (e == "") {
								$('.msg').text("");
							} else {
								$('.msg').text(e);
								$('input[name="username"]').focus();
							}
						},
						error : function(xhr, status, error) { //失败后的回调函数
							console.log("失败：" + xhr);
						}
					})
				})

				//上传头像
				var uploadInst = upload.render({
					elem : '#test1' //绑定元素
					,
					url : '${ctx}/upload' //上传接口
					,
					before : function(obj) {
						//预读本地文件示例，不支持ie8
						obj.preview(function(index, file, result) {
							$('#demo1').attr('src', result); //图片链接（base64）
						});
					},
					done : function(res) {
						//上传完毕回调
						console.log(res);
						$('#headImg').val(res.name);
					},
					error : function(e) {
						//请求异常回调
						console.log(e);
					}
				});

				/* 	//添加角色
					$.ajax({
						url : '${ctx}/user/roleNameList', //地址
						success : function(e) { //成功后的回调函数
							console.log(e);
							var arr = e.split(",");
							for(var i = 0;i<arr.length;i++){
								console.log(arr[i]);
								$("#rolename").append("<option value='"+arr[i]+"'++>"+arr[i]+"</option>"); 				
							}
						},
						error : function(xhr, status, error) { //失败后的回调函数
							console.log("失败：" + xhr);
						}
					});
				 */
			});
		</script>
	</div>
</body>
</html>